<script setup lang="tsx">
import {range, reversed} from "@/components/comm/utils";
import {defineComponent, onMounted, onUnmounted, reactive, useSlots} from "vue";
import {Board} from "@/components/tetris/Board";
import {ElMessageBox} from "element-plus";
import {ArrowLeftBold, ArrowRightBold, Bottom, RefreshLeft, RefreshRight, Switch} from "@element-plus/icons-vue";
import {ElIcon} from 'element-plus'

const xs = 15;
const ys = 10;
const board = reactive(new Board(xs + 2, ys));

function onKey(e: KeyboardEvent) {
  switch (e.key) {
    case "w":
    case "ArrowUp":
    case "8":
      board.tryRotateRight();
      break;
    case "a":
    case "ArrowLeft":
    case "4":
      board.tryMove(0, -1);
      break;
    case "s":
    case "ArrowDown":
    case "5":
    case "2":
      board.full();
      break;
    case "d":
    case "ArrowRight":
    case "6":
      board.tryMove(0, 1);
      break;
    case "q":
    case "7":
      board.tryRotateLeft();
      break;
    case "e":
    case "9":
      board.tryRotateRight();
      break;
    case " ":
    case "0":
      e.preventDefault();  // 防止空格触发按钮的点击事件
      board.quickFull();
      break;
    case "r":
    case "Shift":
    case "+":
      board.swap();
      break;
  }
}

let timer: NodeJS.Timeout;
onMounted(() => {
  timer = setInterval(() => board.full(), 1000);
  window.addEventListener("keydown", onKey);
})
onUnmounted(() => {
  clearInterval(timer);
  window.removeEventListener("keydown", onKey);
})
board.onGameOver(() => {
  clearInterval(timer);
  window.removeEventListener("keydown", onKey);
  ElMessageBox.alert("Game Over");
})

const CtrlButton = defineComponent(() => {
  const slots = useSlots()

  return () => (
      <button class="ctrl-btn" disabled={board.isGameOver}>
        <ElIcon>{slots.default?.()}</ElIcon>
      </button>
  )
})
</script>

<template>
  <div class="main">
    <div>
      <el-text class="score">score: {{ board.score }}</el-text>
      <el-text class="score" style="margin-left: 30px;margin-right:10px;">next:</el-text>
      <div class="board">
        <template v-for="i in reversed(range(4))">
          <div class="row">
            <template v-for="j in range(4)">
              <div class="next-cell" :style="{'background-color': board.getNextColor(i, j)}">
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>

    <div class="board">
      <template v-for="i in reversed(range(xs))">
        <div class="row">
          <template v-for="j in range(ys)">
            <div class="cell" :style="{'background-color': board.getColor(i, j)}">
            </div>
          </template>
        </div>
      </template>
    </div>

    <div class="ctrl">
      <CtrlButton @click="board.tryMove(0,-1)">
        <ArrowLeftBold/>
      </CtrlButton>
      <CtrlButton @click="board.tryMove(0,1)">
        <ArrowRightBold/>
      </CtrlButton>
      <CtrlButton @click="board.quickFull()">
        <Bottom/>
      </CtrlButton>
      <CtrlButton @click="board.swap()">
        <Switch/>
      </CtrlButton>
      <CtrlButton @click="board.tryRotateLeft()">
        <RefreshLeft/>
      </CtrlButton>
      <CtrlButton @click="board.tryRotateRight()">
        <RefreshRight/>
      </CtrlButton>
    </div>
  </div>
</template>

<style scoped>

.board {
  border-left: 2px solid #333;
  border-top: 2px solid #333;
  display: inline-block; /* 让外框紧贴内容 */
}

.row {
  display: flex;
}

.cell {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 只保留右 + 下边框，避免重叠 */
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
}

.next-cell {
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 只保留右 + 下边框，避免重叠 */
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
}

.ctrl {
  margin: 12px auto 0;
  display: flex;
  width: 320px; /* 与 board 同宽（格子宽30 + 边框2） */
  gap: 4px; /* 按钮间距 */
}

.ctrl-btn {
  flex: 1 1 0; /* 均分宽度 */
  aspect-ratio: 1 / 1; /* 正方形 */
  font-size: 20px;
  color: #fff;
  background: #222;
  border: 3px solid #555;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .1s;
}

.ctrl-btn:active {
  transform: scale(.95); /* 按下凹陷 */
}

.score {
  font-size: 30px;
}
</style>